<template>
  <a-modal
    title="賬單詳情"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
     <div class="red-de-con">
       <a-row>
        <h3>小計：{{ data.subtotal }}</h3>
      </a-row>
      <a-row class="hang">
        <h4><span v-if="data.billStatus === 2 || data.billStatus === 4" class="yjz">已交租</span>【{{ data.qsNum }}期賬單】 ---{{ data.name }}-{{ data.phone }}</h4>
      </a-row>
      <a-row class="hang">
        <a-col :span="4">交租日</a-col>
        <a-col :span="8">{{ data.rentedDay }}</a-col>
      </a-row>
      <a-row class="hang">
        <a-col :span="4">賬單週期</a-col>
        <a-col :span="8">{{ data.rentStartDate }}至{{ data.rentEndDate }}</a-col>
      </a-row>
      <div v-if="data.billStatus === 2 || data.billStatus === 4">
        <a-row class="hang">
          <a-col :span="4">交租日期</a-col>
          <a-col :span="8">{{ data.receiveDate }}</a-col>
        </a-row>
        <a-row class="hang">
          <a-col :span="4">收款方式</a-col>
          <a-col :span="8">{{ data.collectionTypeName }}</a-col>
        </a-row>
      </div>
      <a-divider />
      <a-row v-for="(item, index) in gdfy" :key="index" class="hang">
        <a-col :span="4">{{ item.rentAmountName}}</a-col>
        <a-col :span="8">{{ item.amount }}元</a-col>
      </a-row>
      <a-divider />
      <a-row class="hang">
        <a-col :span="4">簽約房間</a-col>
        <a-col :span="20">
          <span class="qyfj" v-for="(item, index) in rooms" :key="index">{{ item.roomName }},</span>
        </a-col>
      </a-row>
       <a-row class="hang">
        <a-col :span="4">備註</a-col>
        <a-col :span="20">
          {{ data.remark }}
        </a-col>
      </a-row>
     </div>
    </a-spin>
  </a-modal>
</template>

<script>
  import moment from 'moment'
  import { getOwnerBillDetailReadOnlyIn } from '@/api/modular/main/ownerleasebill/ownerLeaseBillManage'
  export default {
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        visible: false,
        confirmLoading: false,
        data: {},
        gdfy: [],
        rooms: [],
        id: ''
      }
    },
    methods: {
      moment,
      // 初始化方法
      edit (id) {
        this.visible = true
        this.id = id
        this.initNeedData(id)
      },
      initNeedData(id) {
        getOwnerBillDetailReadOnlyIn(id).then((res) => {
          if (res.code === 200) {
            this.data = res.data
            this.gdfy = this.data.details
            this.rooms = this.data.roomNames
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      handleSubmit () {
        this.handleCancel()
      },
      handleCancel () {
        this.visible = false
        this.id = ''
        this.data = {}
        this.gdfy = []
        this.rooms = []
      }
    }
  }
</script>

<style lang="less" scoped>
.red-de-con{
  padding: 0px 20px;
}
.qyfj{
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  margin-right: 2px;
}
.hang{
  margin-top: 6px;
}
.yjz{
  color: red;
}
</style>
